<template>
	<view class="wanl-order-list">
		<!-- <view class="cu-custom bg-white">
			<view class="cu-bar" style="z-index: 1;">
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold line-green"></text>
					<input type="text" maxlength="12" confirm-type="search" placeholder-style="color: #ccc" placeholder="搜索订单" />
				</view>
			</view>
		</view> -->
		<view class="navbar bg-white fixed w100">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		
		<wanl-scroll-list ref="list" :option="{ page: 1, auto: true, safeArea: true }" @load="load($event,'load')" @refresh="load($event,'refresh')" style="padding-top: 60rpx;">
			<view class="tab-content">
				
					<!-- 订单列表 -->
					<view v-for="(order, okey) in orderList" :key="okey" class="order-item radius-bock">
						<view class="head">
							<view class="shop wanl-gray" @tap="onShop(order.shop_id)">
								<text class="wlIcon-dianpu1 wanl-black"></text>
								<text class="wanl-black margin-lr-xs text-30">{{ order.shop.shopname }}</text>
								<text class="wlIcon-fanhuigengduo text-sm"></text>
							</view>
							<view class="margin-right-bj text-sm">
								<text class="state" :style="{ color: order.stateTipColor }">{{ order.stateTip }}</text>
								<text v-if="order.state === 7" class="margin-left-sm wlIcon-lajitong" @tap="deleteOrder(order.id,okey)"></text>
							</view>
						</view>
						<!-- 商品 -->
						<view class="goods-box" v-for="(goods, gkey) in order.goods" :key="goods.id" @tap="orderDetails(order.id)">
							<view class="cu-avatar xl margin-right-bj radius" :style="{backgroundImage: 'url('+$wanlshop.oss(goods.image, 70, 70)+')'}"> </view>
							<view class="content margin-right-bj">
								<view class="describe">
									<view class="text-cut-2">
										<view class="cu-tag radius sm bg-red margin-right-xs">{{order.goods_type == 2 ? '积分' : '普通'}}商品</view>
										{{goods.title}}
									</view>
									<view class="wanl_sku text-min">
										<text class="wanl-gray-dark">{{goods.difference}}</text>
									</view>
								</view>
								<view class="parameter">
									<view class="text-sm text-black" :class="{'text-price':order.goods_type == 1}">
										{{ goods.price }}
									</view>
									<view class="text-min wanl-gray">
										x {{ goods.number }}
									</view>
									<!-- 退款状态:0=未退款,1=退款中,2=待退货,3=退款完成 -->
									<view class="text-min text-yellow" v-if="goods.refund_status != 0">
										{{getRefund(goods.refund_status)}}
									</view>
								</view>
							</view>
						</view>
						<!-- 底部 -->
						<view class="price-box text-sm flex">
							<view v-if="order.pay.discount_price > 0" class="margin-right-sm wanl-gray">优惠：<text :class="{'text-price':order.goods_type == 1}">{{ order.pay.discount_price }}</text></view>
							<view v-if="order.pay.freight_price > 0" class="margin-right-sm wanl-gray">快递：<text class="text-price">{{ order.pay.freight_price }}</text></view>
							<view>实付款：<text :class="{'text-price':order.goods_type == 1}">{{ order.pay.price }}</text></view>
						</view>
						<view class="action-box padding-bottom-bj" v-if="order.state == 1">
							<button class="cu-btn round line-black margin-lr-bj" @tap="editAddress(order.id)">修改地址</button>
							<button class="cu-btn round line-black" @tap="cancelOrder(order)">取消订单</button>
							<button class="cu-btn round margin-lr-bj line-green" @tap="paymentOrder(order)">立即支付</button>
						</view>
						<view class="action-box padding-bottom-bj" v-if="order.state == 2">
							<button class="cu-btn round line-black" @tap="toChat(order.shop_id)">联系商家</button>
							<button class="cu-btn round margin-lr-bj line-green" @tap="editAddress(order.id)">修改地址</button>
						</view>
						<view class="action-box padding-bottom-bj" v-if="order.state == 3">
							<button class="cu-btn round line-black" @tap="onLogistics(order.id)">查看物流</button>
							<button class="cu-btn round margin-lr-bj line-green" @tap="confirmOrder(order)">确认收货</button>
						</view>
						<view class="action-box padding-bottom-bj" v-if="order.state == 4">
							<button class="cu-btn round line-black" @tap="onLogistics(order.id)">查看物流</button>
							<button class="cu-btn round margin-lr-bj line-black" @tap="commentOrder(order.id)">评论订单</button>
						</view>
					</view>
					
			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderList:[],
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '全部'
				},
				{
					state: 1,
					text: '待支付'
				},
				{
					state: 2,
					text: '待发货'
				},
				{
					state: 3,
					text: '待收货'
				},
				{
					state: 4,
					text: '待评论'
				}
				// ,{
				// 	state: 7,
				// 	text: '已关闭'
				// }
			]
		};
	},
	methods: {
		load(paging,key) {
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			uni.request({
				url: '/wanlshop/order/getOrderList',
				data: {
					state: state,
					page: paging.page
				},
				success: res => {
					let orderList = res.data.data.filter(item => {
						//添加不同状态下订单的表现形式
						item = Object.assign(item, this.orderStateExp(item.state));
						//演示数据所以自己进行状态筛选
						if (state === 0) {
							//0为全部订单
							return item;
						}
						return item.state === state;
					});
					if(key == 'load') {
						this.orderList = [...this.orderList, ...orderList];
						this.$refs.list.loadSuccess({ list: this.orderList, total: res.data.total });
					} else if(key == 'refresh') {
						this.orderList = orderList;
						this.$refs.list.refreshSuccess({ list: orderList, total: res.data.total });
					}
				}
			});
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			this.$refs.list.refreshScrollView()
			this.load({page:1},'refresh')
		},
		//删除订单
		async deleteOrder(order_id, key) {
			// uni.showLoading({
			// 	title: '请稍后'
			// });
			await uni.request({
				url: '/wanlshop/order/delOrder',
				method: 'POST',
				data: {
					id: order_id
				},
				success: res => {
					this.orderList.splice(key, 1);
					// uni.hideLoading();
					this.$wanlshop.msg('订单删除成功');
				}
			});
		},
		//取消订单- 设置为7 -全局
		async cancelOrder(item) {
			uni.showLoading({
				title: '请稍后'
			});
			// 获取列表
			await uni.request({
				url: '/wanlshop/order/cancelOrder',
				method: 'POST',
				data: {
					id: item.id
				},
				success: res => {
					
					this.$refs.list.refreshScrollView()
					this.load({page:1},'refresh')
					uni.hideLoading();
				}
			});
		},
		commentOrder(id){
			this.$wanlshop.to('/pages/user/order/comments?order_id=' + id);
		},
		//支付订单
		paymentOrder(order){
			this.$wanlshop.to(`/pages/user/money/pay?id=${order.id}&type=goods&goods_type=${order.goods_type}`);
		},
		//确认收货- 全局
		async confirmOrder(item){
			uni.showLoading({
				title: '请稍后'
			});
			// 获取列表
			await uni.request({
				url: '/wanlshop/order/confirmOrder',
				method: 'POST',
				data: {
					id: item.id
				},
				success: res => {
					
					this.$refs.list.refreshScrollView()
					this.load({page:1},'refresh')
					uni.hideLoading();
				}
			});
		},
		//订单状态文字和颜色
		orderStateExp(state) {
			let stateTip = '',
				stateTipColor = '#333';
			switch (+state) {
				case 1:
					stateTip = '等待支付';
					stateTipColor = '#f40';
					break;
				case 2:
					stateTip = '等待卖家发货';
					break;
				case 3:
					stateTip = '卖家已发货';
					break;
				case 4:
					stateTip = '交易成功';
					break;
				case 5:
					stateTip = '交易成功';
					break;
				case 6:
					stateTip = '已完成';
					break;
				case 7:
					stateTip = '订单已关闭';
					stateTipColor = '#777';
					break;
				//更多自定义
			}
			return {
				stateTip,
				stateTipColor
			};
		},
		getRefund(status) {
			return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
		},
		// 修改地址
		editAddress(id) {
			this.$wanlshop.to('/pages/user/envelope/editAddress?source=2&order_id=' + id);
		},
		//添加或修改成功之后回调
		async refreshList(address_id, order_id) {
			uni.showLoading({
				title: '正在提交新地址'
			});
			// 获取列表
			await uni.request({
				url: '/wanlshop/order/editOrderAddress',
				method: 'POST',
				data: {
					id: order_id,
					address_id: address_id
				},
				success: res => {
					this.$wanlshop.msg('地址修改成功');
					uni.hideLoading();
				}
			});
		}
	}
};
</script>

<style>
page {
	height: 100%;
}
.cu-custom .search-form{
	border: 3rpx solid #4CBD66;
	background-color: #fff;
}
</style>
